<template>
	<view class="page-container">
		<!-- <uni-load-more v-if="!loaded" status="loading" class="margin-top-60"></uni-load-more> -->
		<view v-for="(subItem,index2) in dataList" :key="index2" class="component_item">
			<tian-banner v-if="subItem.component=='tian-banner'" :configs="subItem.configs" />
			<tian-grides v-else-if="subItem.component=='tian-grides'" :configs="subItem.configs"
				:items="subItem.items" />
			<tian-search-bar v-else-if="subItem.component=='tian-search-bar'" :configs="subItem.configs">
			</tian-search-bar>
			<tian-article v-else-if="subItem.component=='tian-article'" :configs="subItem.configs" :loadmore="loadmore"
				:refresh="refresh">
			</tian-article>
			<tian-goods-list v-else-if="subItem.component=='tian-goods-list'" :configs="subItem.configs"
				:withSku="false" :loadmore="loadmore" :refresh="refresh" @click="openSku"></tian-goods-list>
			<tian-goods-join-list v-else-if="subItem.component=='tian-goods-join-list'" :configs="subItem.configs"
				:loadmore="loadmore" :refresh="refresh" :withSku="false" @click="openSku">
			</tian-goods-join-list>
			<!-- #ifndef H5 -->
			<ad v-else-if="subItem.component=='ad'" :adpid="subItem.configs.adpid" :unit-id="subItem.configs.adpid" />
			<!-- #endif -->
		</view>
		<!-- 有商品模块，初始化此控件 -->
		<tian-goods-sku v-if="hasGoodsModule" :value="goods" ref="tianSkuPop"></tian-goods-sku>
	</view>
</template>
<script>
	const db = uniCloud.database();
	/**
	 * 普通组件页面
	 * @property {Object} configs 组件配置 
	 * @property {Object} styles 组件样式
	 * @property {Array} items 组件静态数据
	 * @property {Number} refresh 刷新值
	 */
	export default {
		data() {
			return {
				goods: {},
				dataList: []
			}
		},
		props: {
			configs: {
				type: Object,
				default: () => {
					return {}
				}
			},
			styles: {
				type: Object,
				default: () => {
					return {}
				}
			},
			items: {
				type: Array,
				default: () => {}
			},
			refresh: {
				type: Number,
				default: 0
			},
			loadmore: {
				type: Number,
				default: 0
			}
		},
		computed: {
			/**
			 * 是否存在商品模块
			 */
			hasGoodsModule() {
				if (this.dataList) {
					return this.dataList.filter(e => e.component.indexOf("goods") != -1).length > 0;
				}
				return false;
			}
		},
		watch: {
			configs(newVal) {
				console.log("watch page config", newVal)
				if (newVal.children) {
					//静态数据
					this.dataList = newVal.children;
				} else {
					//动态数据
					this.loadData()
				}
			}
		},
		created() {
			// console.log("this.config", this.configs)
			if (this.configs.children) {
				this.dataList = this.configs.children
			} else {
				this.loadData()
			}
		},
		mounted() {
			this.loaded = true;
		},
		methods: {
			loadData() {
				db.collection("tian-pages").orderBy("posid asc").get({
					getTree: {
						limitLevel: 10,
						startWith: `parent_id=="${this.configs.parent_id}"`
					}
				}).then(({
					result
				}) => {
					this.dataList = result.data;
				})
			},
			/**
			 * 列表上打开sku
			 * @param {Object} e
			 */
			openSku(e) {
				console.log("openSku", e)
				this.goods = e;
				this.$refs.tianSkuPop.open();
			},
		}
	}
</script>
<style lang="scss">
	.page-container {
		width: 750rpx;
	}
</style>
